<template>
  <div class="content">
    <p>请输入游戏人数和座次:</p>
    <p>
      <span>游戏人数：</span
      ><van-stepper v-model="player_num" :min="3" :max="12" integer />
    </p>
    <p>
      <span>您的座次：</span
      ><van-stepper v-model="position" :min="1" :max="player_num" integer />
    </p>
    <van-button @click="play">确定</van-button>
  </div>
  <van-toast id="van-toast" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showDialog, Toast } from "vant";

let player_num = ref<number>(3);
let position = ref<number>(1);

const play = () => {
  if (position.value > player_num.value) {
    Toast.fail("座次不能大于人数");
  } else {
    let seat = [];
    for (let i = 1; i <= player_num.value; i++) {
      if (position.value !== i) {
        seat.push(i);
      }
    }
    let index = Math.floor(Math.random() * seat.length);
    let res = seat[index];
    showDialog({
      title: `嘤嘤嘤`,
      message: `请看${res}号位的手牌`,
    }).then(() => {
      // on close
    });
  }
};
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
}
</style>
